<template>
  <div class="wrap">
    <h2>
      用户注册
    </h2>
    <div class="login-content">
      <form action="" method="post" name="loginform" id="loginform">
        <div class="login-content-wrap">
          <input type="text" name="email" id="useremail" class="left"
            placeholder=" 请输入邮箱" v-model="useremail" size="20" required>
          <input type="text" name="conEmail" id="conUsermail" class="right"
            placeholder=" 请确认邮箱" v-model="conUsermail" size="20" required>
        </div> 
        <div class="login-content-wrap">
          <input type="text" name="email" id="useremail" class="left"
            placeholder=" 请输入邮箱" v-model="useremail" size="20" required>
          <input type="text" name="conEmail" id="conUsermail" class="right"
            placeholder=" 请确认邮箱" v-model="conUsermail" size="20" required>
        </div> 
        <div class="login-content-wrap">
          <input type="password" name="password" id="password"  required class="left"
            placeholder=" 请输入密码" v-model="password" size="20" autocomplete="off">
          <input type="password" name="conpassword" id="conpassword"  required class="right"
            placeholder=" 请确认密码" v-model="conpassword" size="20" autocomplete="off">
        </div>
        <div class="login-profession-wrap">
          <div class="login-profession-select">
            <div class="login-profession-label">
              你的职业
            </div>
            <el-select v-model="professionValue" placeholder="请选择---"
              :popper-append-to-body="false">
              <el-option
                v-for="item in professionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="login-birth-select">
            <div class="login-birth-label">
              出生日期
            </div>
            <el-date-picker
              v-model="birthValue"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div class="login-btn">
          <input type="submit" name="submit" id="submit" value="注册" class="submit">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
data() {
   return {
     professionOptions: [{
        value: '1',
        label: '学生'
      }, {
        value: '2',
        label: '教师'
      }, {
        value: '3',
        label: '工程师'
      }, {
        value: '4',
        label: '程序员'
      }],
      professionValue: '',
      birthValue: ''
    }
  }
}
</script>

<style lang="less" scope>
.wrap {
  h2 {
    font-size: 18px;
    margin: 40px 0;
    padding-bottom: 25px;
    font-weight: 500;
    border-bottom: 0;
  }
  .login-content-wrap {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    .left {
      margin-right: 2px;
    }
    .right {
      margin-left: 2px;
    }
    input {
      // flex: 1;
      box-sizing: border-box;
      width: 100%;
      background: #FFF;
      border: 0 none;
      border-bottom: 1px solid #989898;
      color: #989898;
      font-size: 14px;
      outline: 0;
      padding: 15px 0;
    }
  }
  .login-profession-wrap {
    padding: 30px 0;
    font-size: 14px;
    color: #000;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 2px;
    .login-profession-select {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .login-profession-label {
          margin-bottom: 10px;
        }
      
      .el-input__inner {
        border-radius: 0px;
        border: 1px solid #989898;
        color: #989898;
      }
      .el-select-dropdown__item.selected {
        background-color: #cbcbcb;
        color: #4d4d4d;
      }
    }
    .login-birth-select {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .login-birth-label {
          margin-bottom: 10px;
      }
      .el-input--prefix .el-input__inner {
          padding-left: 30px;
      }

      .el-input__inner {
          border-radius: 0px;
          border: 1px solid #989898;
          color: #989898;
      }
    }
    
  }
  .login-btn {
    margin-bottom: 200px;
      input {
        background: #4d4d4d;
        font-size: 18px;
        padding: 3px 26px;
        color: #FFF;
        border: 0 none;
        cursor: pointer;
      }
      input:hover {
        background-color: #f00;
      }
    }
}

.el-date-table td.today span {
  color: #333;
  font-weight: 700;
}
.el-date-table td div:hover {
  color: #333;
  font-weight: 700;
}
.el-date-table td.current:not(.disabled) span {
  color: #FFF;
  background-color: #333;
}
.el-input--prefix .el-input__inner {
    padding-left: 30px;
}
</style>